<div class="text-center" style="margin-bottom: 30px;margin-top: 10px;">
    <img src="img/bootstrap.png" alt="bootstrap" style="height: 200px"/>
</div>

<div class="jumbotron shadow">
    <h1 class="display-4  text-center">BootStrap4 中文文档</h1>
    <p class="lead  text-center">BootStrap4 帮你轻松创建响应式，并在移动设备也能提供友好体验的网站。</p>
    <hr class="my-4">
    <p class="lead">Bootstrap 内置了大量常用界面设计组件，只需要几行代码，就可以为你的网站带来各种界面与功能。阅读本教程，你甚至可以在数秒之内建立一个设计良好的网站首页。之后根据需求，“复制粘贴”所需的组件来构建你网站的功能即可。</p>
    <div class="text-center">
        <a class="btn btn-primary btn-lg" href="./pages/getting_started.html" role="button">让我们开始吧</a>
        <p class="text-dark text-sm-center mt-2">v4.3.1</p>
    </div>    
</div>

<h1 class="display-4 text-center">酷站精选</h1>
<p class="lead text-center">这些网站使用了 Bootstrap</p>
<figure class="figure">
  <img data-dl-root="true" src="img/collect/mongodb2.jpg" class="shadow figure-img img-fluid rounded" alt="mongodb">
  <figcaption class="figure-caption"><a href="https://www.mongodb.com/" target="_blank"><h3>MongoDB</h3></a></figcaption>
</figure>
<figure class="figure">
  <img data-dl-root="true" src="img/collect/byton2.jpg" class="shadow figure-img img-fluid rounded" alt="byton">
  <figcaption class="figure-caption"><a href="https://www.byton.com/" target="_blank"><h3>Byton</h3></a></figcaption>
</figure>
<figure class="figure">
  <img data-dl-root="true" src="img/collect/creative_tim2.jpg" class="shadow figure-img img-fluid rounded" alt="creative_tim">
  <figcaption class="figure-caption"><a href="https://www.creative-tim.com/presentation/" target="_blank"><h3>Creative-Tim</h3></a></figcaption>
</figure>
<figure class="figure">
  <img data-dl-root="true" src="img/collect/crit.jpg" class="shadow figure-img img-fluid rounded" alt="crit">
  <figcaption class="figure-caption"><a href="https://www.crit-research.it/it/" target="_blank"><h3>Crit Research</h3></a></figcaption>
</figure>
<figure class="figure">
  <img data-dl-root="true" src="img/collect/indicius2.jpg" class="shadow figure-img img-fluid rounded" alt="indicius">
  <figcaption class="figure-caption"><a href="https://indicius.com/" target="_blank"><h3>Indicius</h3></a></figcaption>
</figure>
<br>